<template>
  <div class="box">
    <div class="content">
      <div class="logo" @click="home">
        <img src="@/assets/image/logo16.png" alt="" />
        <span>商驿企服数字科技平台</span>
      </div>
      <div class="login">
        <div class="login_left"></div>
        <div class="login_right">
          <div class="login_right_f1">
            <p>设置密码</p>
          </div>
          <div class="login_right_f3">
            <div class="login-box-input-box">
              <el-form
                :model="updataForm"
                class="demo-ruleForm"
                label-width=".5729rem"
                :rules="updataPwdRules"
              >
                <el-form-item prop="pwd" label="密码">
                  <div class="login-uname">
                    <el-input
                      class="aaaa"
                      :type="password"
                      v-model="updataForm.pwd"
                      placeholder=""
                      @blur="updataFormNewPwd"
                    >
                    </el-input>
                    <div class="icon">
                      <img
                        @click="password = 'password'"
                        v-show="password == 'text'"
                        src="@/assets/login/眼睛_显示.png"
                        alt=""
                      />
                      <img
                        @click="password = 'text'"
                        v-show="password == 'password'"
                        src="@/assets/login/闭眼睛.png"
                        alt=""
                      />
                    </div>
                    <p class="error" v-show="updataFormVerify.newPwd">字母+数字组合，8-16位</p>
                  </div>
                </el-form-item>
                <el-form-item prop="confirmPwd" label="确认密码">
                  <div class="login-uname">
                    <el-input
                      class="aaaa"
                      :type="password1"
                      v-model="updataForm.confirmPwd"
                      placeholder=""
                      @blur="updataFormConfirmPwd"
                    >
                    </el-input>
                    <div class="icon">
                      <img
                        @click="password1 = 'password'"
                        v-show="password1 == 'text'"
                        src="@/assets/login/眼睛_显示.png"
                        alt=""
                      />
                      <img
                        @click="password1 = 'text'"
                        v-show="password1 == 'password'"
                        src="@/assets/login/闭眼睛.png"
                        alt=""
                      />
                    </div>
                    <p class="error" v-show="updataFormVerify.confirmPwd">两次密码输入不一致</p>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div class="login_right_f5">
              <div class="btn" @click="setPwd">确认</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '@/components/Footer.vue'
import { myPostFetch, smsSend, updatePwd } from '@/utils/index'
export default {
  components: { Footer },
  data() {
    return {
      password: 'password',
      password1: 'password',
      id: '',
      updataForm: {
        pwd: '',
        confirmPwd: ''
      },
      updataFormVerify: {
        newPwd: null,
        confirmPwd: null
      },
      // 修改密码表单验证
      updataPwdRules: {
        pwd: [{ required: true, message: ' ', trigger: 'blur' }],
        confirmPwd: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.id = this.$route.query.id
  },
  methods: {
    home() {
      if (this.$route.path == '/home') return
      this.$router.push('/home')
    },
    // 验证码校验
    verifyMsgcode() {
      if (this.updataForm.msgcode.length != 6) {
        this.updataForm.msgcode = ''
        return
      }
    },
    // 密码校验
    updataFormNewPwd() {
      this.updataFormVerify.newPwd = null
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
      if (!reg.test(this.updataForm.pwd)) {
        this.updataForm.pwd = ''
        this.updataFormVerify.newPwd = true
      }
    },
    // 密码验证
    updataFormConfirmPwd() {
      this.updataFormVerify.confirmPwd = null
      if (this.updataForm.confirmPwd != this.updataForm.pwd) {
        this.updataForm.confirmPwd = ''
        this.updataFormVerify.confirmPwd = true
      }
    },
    // 设置密码
    async setPwd() {
      let { pwd, confirmPwd } = this.updataForm
      let id = this.id
      if (pwd.trim() == '' || confirmPwd.trim() == '') return this.$Message.error('请输入密码')
      let url = '/api/entlogin/setPwd'
      let params = {
        id: id,
        pwd: pwd
      }
      let data = await myPostFetch(url, params)
      if (data.code == 100) {
        sessionStorage.setItem('customerid', data.data.customerid)
        // token;
        sessionStorage.setItem('token', data.data.token)
        // 用户名称
        sessionStorage.setItem('userName', data.data.username)
        // 用户电话号码
        sessionStorage.setItem('userPhone', data.data.username)
        // copid
        sessionStorage.setItem('coopid', data.data.coopid)
        // 用户id
        sessionStorage.setItem('id', data.data.id)
        // 用户登录时间变量
        sessionStorage.setItem('date', data.data.date)
        // 登录状态
        sessionStorage.setItem('loginState', true)
        // 跳转
        this.$Message({
          message: '登录成功，欢迎您使用商驿企服数字科技平台',
          type: 'success',
          duration: '1500'
        })
        this.loading = false
        this.$router.push('/')
        setTimeout(() => {
          this.$router.go(0)
        }, 500)
      } else {
        this.$Message.error(data.msg ? data.msg : '服务器错误')
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 10rem;
  height: 4.1667rem;
  background: url(@/assets/login/组124.png) no-repeat;
  background-size: 100% 100%;
  opacity: 1;
  .content {
    box-sizing: border-box;
    padding-top: 0.2083rem;
    margin: 0 auto;
    width: 8.5938rem;
    height: 4.1667rem;
    .logo {
      cursor: pointer;
      display: flex;
      align-items: center;
      height: 0.2604rem;
      span {
        font-size: 0.1042rem;
        font-weight: bold;
        color: #000000;
        margin-left: 0.0781rem;
      }
      img {
        width: 0.3021rem;
      }
    }
    .login {
      display: flex;
      justify-content: space-evenly;
      margin-top: 0.2604rem;
      height: 3.125rem;
      .login_left {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.6042rem;
        height: 100%;
      }
      .login_right {
        box-sizing: border-box;
        padding: 0.1979rem 0.1563rem;
        width: 2.5rem;
        height: 2.5rem;
        background: #ffffff;
        // box-shadow: 0.0521rem 0.0313rem 0.2083rem 0.0313rem #b7bbc1;
        border-radius: 0.0625rem;
        opacity: 1;
        .login_right_f1 {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          p {
            font-size: 0.1354rem;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #3f6ef2;
          }
          .return {
            cursor: pointer;
            display: flex;
            align-items: center;
            height: 0.099rem;
            position: absolute;
            right: 0px;
            bottom: 0px;
            font-size: 0.0729rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #848fad;
            span {
              margin-left: 0.026rem;
            }
            img {
              width: 0.0781rem;
              height: 0.0677rem;
            }
          }
        }
        .login_right_f3 {
          margin: 0 auto;
          width: 2.0104rem;
          height: 0.6406rem;
          .login-box-input-box {
            position: relative;
            width: 100%;
            margin: 0.2083rem 0 0.4948rem 0;
            .login-uname {
              position: relative;
              display: flex;
              align-items: center;
              box-sizing: border-box;
              .icon {
                display: flex;
                position: absolute;
                height: 100%;
                img {
                  cursor: pointer;
                  width: 0.125rem;
                  position: absolute;
                  left: 1.25rem;
                  top: 0.0521rem;
                }
              }
              .error {
                position: absolute;
                top: 0.2083rem;
                left: 0;
                color: #f56c6c;
                font-size: 0.0625rem;
              }
              .timer {
                height: 0.2083rem;
                position: absolute;
                right: 0.0833rem;
                top: 0.0104rem;
                font-size: 16px;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #3f6ef2;
                cursor: pointer;
                user-select: none;
                // background-color: #f00;
              }
              img {
                position: absolute;
                left: 0.0781rem;
                top: 0.077rem;
                width: 0.0833rem;
                z-index: 9;
              }
            }
          }
        }
        // 按钮
        .login_right_f5 {
          width: 100%;
          height: 0.2604rem;
          .btn {
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            width: 2.0104rem;
            height: 0.2604rem;
            background: linear-gradient(-90deg, #5d98f8, #4b5af8);
            box-shadow: 0rem 0.0313rem 0.1042rem 0rem rgba(0, 40, 193, 0.5);
            border-radius: 0.0313rem;
            font-size: 0.1042rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }
    }
  }
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  padding: 0 0.0521rem;
  height: 0.2344rem;
  border: 0.0052rem solid #e0dede;
  border-radius: 0;
}
::v-deep .el-form-item__label {
  line-height: 0.2083rem;
}
::v-deep .el-input__inner {
  &::placeholder {
    font-size: 0.0833rem;
    font-family: 'Microsoft YaHei';
  }
  color: #555;
  font-family: 'Microsoft YaHei';
  font-size: 0.0781rem !important;
}
::v-deep .el-form-item__content {
  line-height: 0.2083rem;
  position: relative;
  font-size: 0.0729rem;
}
::v-deep .el-form-item {
  margin-bottom: 0.1563rem;
}
::v-deep .el-form-item__label {
  font-size: 0.0833rem;
  font-weight: 400;
  color: #1f1f20;
}
</style>
